<%--
  Created by IntelliJ IDEA.
  User: 王凯璇
  Date: 2020/12/21
  Time: 18:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>不同风速下每小时最大使用量</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1500px;height:750px;"></div>
<%--<div id="main" style="width:600px;height:400px;"></div>--%>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));

    option = {
        backgroundColor: '#32374d',
        title: [{
            text: '不同风速下一小时的最大使用量',
            x: '70%',
            y: 30,
            textAlign: 'center',
            textStyle: {
                fontSize: '30',
                fontFamily:'华文彩云',
                fontWeight: '100',
                // fontStyle:'bold',
                color: '#FFF',
                textAlign: 'right',
            },
        }, ],
        legend: {
            top: '16%',
            x:'65%',
            textStyle: {
                color: '#a4a8b4'
            },
        },
        grid: {
            left: '3%',
            // top: '5%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.3)'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                // margin: 30,
                color: '#a4a8b4',
            }
        },
        yAxis: {
            type: 'category',
            data:[],// ['E', 'D', 'C', 'B', 'A'],倒序排列
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.3)'
                }
            },
            splitNumber:30,
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                margin: 50,
                color: '#a4a8b4',
            }
        },
        color: [
            new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                offset: 0,
                color: 'rgba(235,112,236,.8)'
            },
                {
                    offset: 0.8,
                    color: 'rgba(77,75,221,.8)'
                },
                {
                    offset: 1,
                    color: 'rgba(77,75,221,0)'
                }
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                offset: 0,
                color: 'rgba(255,157,96,.8)'
            },
                {
                    offset: 0.8,
                    color: 'rgba(246,84,157,.8)'
                },
                {
                    offset: 1,
                    color: 'rgba(246,84,157,0)'
                }
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                offset: 0,
                color: 'rgba(132,225,145,.8)'
            },
                {
                    offset: 0.8,
                    color: 'rgba(106,185,242,.8)'
                },
                {
                    offset: 1,
                    color: 'rgba(106,185,242,0)'
                }
            ]),
        ],
        series: [
    {
            name: '',
            type: 'bar',
            xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
            yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
            data: [],
            barWidth: 1,
            itemStyle: {
                normal: {
                    color: 'rgba(255, 255, 255, .1)',
                },
            },
            z: 1
        },
            {
                name: 'casual',
                type: 'bar',
                stack: 'Tik Tok',
                barWidth: 15,
                itemStyle: {
                    shadowColor: '#000',
                    shadowBlur: 10,
                    shadowOffsetY: 0,
                    shadowOffsetX: 0,
                    borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: 'rgba(240,82,255,1)'
                        },
                            {
                                offset: 0.8,
                                color: 'rgba(77,75,221,1)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(77,75,221,0)'
                            }
                        ],
                        false
                    ),
                    borderWidth: 1,
                },
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight',
                        offset: [20, 0],
                        textStyle: {
                            align: 'center',
                            baseline: 'middle',
                            fontSize: 14,
                            fontWeight: '400',
                            color: '#fff',
                            textShadowColor:'#000',
                            textShadowBlur:'0',
                            textShadowOffsetX:1,
                            textShadowOffsetY:1,
                        }
                    },
                },
                data: []
            },
            {
                name: 'registered',
                type: 'bar',
                stack: 'Tik Tok',
                barWidth: 15,
                itemStyle: {
                    shadowColor: '#000',
                    shadowBlur: 10,
                    shadowOffsetY: 0,
                    shadowOffsetX: 0,
                    borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: 'rgba(255,151,60,.8)'
                        },
                            {
                                offset: 0.8,
                                color: 'rgba(246,84,157,.8)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(246,84,157,0)'
                            }
                        ],
                        false
                    ),
                    borderWidth: 1,
                },
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight',
                        offset: [-20, 0],
                        textStyle: {
                            align: 'center',
                            baseline: 'middle',
                            fontSize: 14,
                            fontWeight: '400',
                            color: '#fff',
                            textShadowColor:'#000',
                            textShadowBlur:'0',
                            textShadowOffsetX:1,
                            textShadowOffsetY:1,
                        }
                    },
                },
                data: []
            },
            {
                name: 'registered',
                type: 'bar',
                stack: 'Tik Tok',
                barWidth: 25,
                itemStyle: {
                    shadowColor: '#000',
                    shadowBlur: 10,
                    shadowOffsetY: 0,
                    shadowOffsetX: 0,
                    borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: 'rgba(102,255,124,.8)'
                        },
                            {
                                offset: 0.8,
                                color: 'rgba(106,185,242,.8)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(106,185,242,0)'
                            }
                        ],
                        false
                    ),
                    borderWidth: 1,
                },
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight',
                        offset: [-20, 0],
                        formatter: '{c}%',
                        textStyle: {
                            align: 'center',
                            baseline: 'middle',
                            fontSize: 14,
                            fontWeight: '400',
                            color: '#fff',
                            textShadowColor:'#000',
                            textShadowBlur:'0',
                            textShadowOffsetX:1,
                            textShadowOffsetY:1,
                        }
                    },
                },
                data: []
            },
            {
                name: '',
                type: 'bar',
                data: [ ],
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: 'rgba(255, 255, 255, .1)',
                    },
                },
                z: 1
            },
        ]
    };

    var casual = [];
    var registered = [];
    var count = [];
    var temperature = [];
    var sum = [];

    $.ajax({
        url: 'maxusage',
        method: "post",
        datatype: "json",
        success: function(data) {
            alert(JSON.stringify(data));  //测试ajax是否成功调用了servlet

            if(data) {
                for (var i=0;i<data.length;i++) {
                    temperature.push(data[i]['temperature']);
                }
                for (var i=0;i<data.length;i++) {
                    casual.push(data[i]['casual']);
                }
                for (var i=0;i<data.length;i++) {
                    registered.push(data[i]['registered']);
                }
                for (var i=0;i<data.length;i++) {
                    count.push(data[i]['count']);
                }

                myChart.setOption({
                    yAxis:[{data:temperature}],
                    series: [{
                        //count
                    },{
                        data: casual
                    }, {
                        data: registered
                    }]
                })
            }

        },
        error: function (errMsg) {
            console.error(errMsg)
        }
    });

    myChart.setOption(option);
</script>
</body>
</html>
